import "./login.scss";
import { Button, Input, Form, Toast } from "react-vant";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import api from "../../util/api";
import { ArrowLeft } from '@react-vant/icons';

export default function Login() {
  const navigate = useNavigate();
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
  const handlePwd = (val: React.SetStateAction<string>) => {
    setPassword(val);
  };
  const handleUser = (val: React.SetStateAction<string>) => {
    setUser(val);
  };
  const login = () => {
    api
      .post("/cwp/login", { user: user, password: password })
      .then((res: any) => {
        if (res.code == 200) {
          localStorage.setItem(
            "user",
            JSON.stringify({
              user: user,
              password: password,
              note: res.note
            })
          );
          Toast.success({ message: res.message });
          if (res.note.role === '老师') {
            navigate("/home");
          } else {
            navigate('/app/home')
          }

        } else if (res.code == 501) {
          Toast.fail({ message: res.message });
        } else if (res.code == 500) {
          Toast.fail({ message: res.message });
        }
      });
    // navigate("/home")
  };
  return (
    <div className="login">
      <div className="back-icon">
        <ArrowLeft fontSize="2em" onClick={() => navigate(-1)} />
      </div>
      <div className="head">
        <p>Hi,欢迎回来</p>
        <p>今天准备好上课了吗？</p>
      </div>
      <div className="form">
        <Form
          layout="vertical"
          footer={
            <div style={{ margin: "16px 16px 0" }}>
              <Button round nativeType="submit" block onClick={login}>
                登录
              </Button>
              <hr />
              <p>其他登录方式</p>
            </div>
          }
        >
          <Form.Item
            // 手机号正则
            rules={[
              { required: true, message: "请填写手机号" },
              { pattern: /^1[3456789]\d{9}$/, message: "请填写正确的手机号" },
            ]}
            name="name"
            label="您的账号"
          >
            <Input
              placeholder="请输入您的账号"
              value={user}
              onChange={handleUser}
            />
          </Form.Item>
          <Form.Item
            rules={[
              { required: true, message: "请填写密码" },
              // 正则判断是否是英语大写开头 其余部分是数字+小写字母 并且不能小于8位
              { pattern: /^[A-Z][a-z0-9]{7,16}$/, message: "大写字母开头，其余部分是数字+小写字母，共8-16位数" },
            ]}
            name="mobile"
            label="密码"
          >
            <Input
              placeholder="请输入您的密码"
              type="password"
              value={password}
              onChange={handlePwd}
            />
          </Form.Item>
          <span className="repswd" onClick={() => navigate("/forget")}>忘记密码?</span>
        </Form>
      </div>
      <div className="other">
        <div className="other-login">
          <div className="box1">
            <img
              src="https://cdn7.axureshop.com/demo2023/2246171/images/33-%E7%99%BB%E5%BD%95/u5250.png"
              alt=""
            />
          </div>
          <div className="box1">
            <img
              src="https://cdn7.axureshop.com/demo2023/2246171/images/33-%E7%99%BB%E5%BD%95/%E5%BD%A2%E7%8A%B6_u5229.svg"
              alt=""
            />
          </div>
          <div className="box1">
            <img
              src="https://cdn7.axureshop.com/demo2023/2246171/images/33-%E7%99%BB%E5%BD%95/u5249.png"
              alt=""
            />
          </div>
        </div>
        <div className="register">
          <div>还没有账号？</div>
          <div
            onClick={() => navigate("/register")}
          >点击注册</div>
        </div>
      </div>
    </div>
  );
}
